<template>
  <a
    target="_blank"
    :href="props.url"
    class="szy-link"
    :class="classes"
    :underline="props.underline"
    ><slot></slot
  ></a>
</template>

<script setup lang="ts">
import { computed } from "vue";
// Link组件接收不同的props 为表现不同的组件样式
const props = defineProps({
  theme: { type: String, default: "button" },
  url: { type: String },
  underline: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
});

const classes = computed(() => {
  return [`szy-theme-${props.theme}`];
});
</script>

<style scoped lang="scss">
$blue: #40a9ff;
$red: #f56c6c;
$grey: #909399;
$green: #67c23a;
$origin: #e6a23c;
$bluelit: #ecf5ff;
.szy-link {
  font-size: 20px;
  margin-right: 20px;
  &:hover {
    &[underline="true"] {
      border-bottom: 1px solid black;
    }
  }
  &.szy-theme-primary {
    &:hover {
      &[underline="true"] {
        border-bottom: 1px solid $blue;
      }
    }
    color: $blue;
  }
  &.szy-theme-success {
    &:hover {
      &[underline="true"] {
        border-bottom: 1px solid $green;
      }
    }
    color: $green;
  }
  &.szy-theme-info {
    &:hover {
      &[underline="true"] {
        border-bottom: 1px solid $grey;
      }
    }
    color: $grey;
  }
  &.szy-theme-warn {
    &:hover {
      &[underline="true"] {
        border-bottom: 1px solid $origin;
      }
    }
    color: $origin;
  }
  &.szy-theme-danger {
    &:hover {
      &[underline="true"] {
        border-bottom: 1px solid $red;
      }
    }
    color: $red;
  }
}
</style>
